<template>
  <div class="root">
    <topbar />
    <publictitle />
    <div class="body_box">
      <div class="noticebar">
        <div class="icon_box">
          <svg
            t="1653397110177"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2451"
            width="20px"
            height="20px"
          >
            <path
              d="M694.368 117.28a67.957333 67.957333 0 0 1 10.336 36.021333v717.408a67.957333 67.957333 0 0 1-103.978667 57.632L326.026667 756.650667H180.48A95.146667 95.146667 0 0 1 85.333333 661.504V362.506667a95.146667 95.146667 0 0 1 95.146667-95.146667h145.546667L600.725333 95.68a67.957333 67.957333 0 0 1 93.653334 21.610667z m120.330667 133.525333a32 32 0 0 1 44.533333 8.042667 443.114667 443.114667 0 0 1 0.117333 506.133333 32 32 0 0 1-52.586666-36.458666 379.114667 379.114667 0 0 0-0.106667-433.184 32 32 0 0 1 8.042667-44.533334z"
              p-id="2452"
            ></path>
          </svg>
        </div>
        <marquee direction="up" height="30px" scrollamount="1">
          <a><span>我是公告</span></a>
        </marquee>
      </div>
      <div class="none_box"></div>
      <div class="body_box_result">
        <div class="success" v-if="!pay_result">
          <el-col :sm="16" :lg="18">
            <el-result
              icon="success"
              title="成功提示"
              subTitle="请根据提示进行操作"
            >
              <template slot="extra">
                <el-button type="primary" size="medium">返回</el-button>
              </template>
            </el-result>
          </el-col>
        </div>
        <div class="fail" v-if="pay_result">
          <el-col :sm="12" :lg="6">
            <el-result
              icon="error"
              title="错误提示"
              subTitle="请根据提示进行操作"
            >
              <template slot="extra">
                <el-button type="primary" size="medium">返回</el-button>
              </template>
            </el-result>
          </el-col>
        </div>
      </div>
      <div class="block">
        <el-carousel trigger="click" height="150px">
          <el-carousel-item v-for="(item, index) in img_url" :key="index">
            <a href=""> <img :src="item.url" alt="" /> </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <bottom />
  </div>
</template>

<script>
import topbar from "@/components/topbar.vue";
import publictitle from "@/components/title.vue";
import bottom from "@/components/bottom.vue";

export default {
  components: {
    topbar,
    publictitle,
    bottom,
  },
  data() {
    return {
      pay_result: true,
      code: 200,
      img_url: [
        {
          url: require("@/assets/images/advret_img/1.png"),
        },
        {
          url: require("@/assets/images/advret_img/2.png"),
        },
        {
          url: require("@/assets/images/advret_img/3.png"),
        },
        {
          url: require("@/assets/images/advret_img/4.png"),
        },
      ],
    };
  },
  watch: {
    $route() {
      this.pay_result = this.$route.query.status;
      console.log(this.$route.query.status);
    },
  },
  created() {
    this.pay_result = this.$route.query.status;
    console.log(this.$route.query.status);
  },
  methods: {},
};
</script>
<style scoped>
.block a{
  cursor: pointer;
}
.block img {
  width: 100%;
  height: 100%;
}
.fail {
  /* 高度 */
  height: 100%;
  /* 垂直居中 */
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
}
.success {
  /* 高度 */
  height: 100%;
  /* 垂直居中 */
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
}
.body_box_result {
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
.none_box {
  width: 100%;
  height: 50px;
}
.icon_box {
  width: 50px;
  height: 100%;
  /* 转换为行内元素 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.noticebar marquee {
  width: auto;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 超出的隐藏 */
  overflow: hidden;
}
.noticebar {
  height: 40px;
  width: 100%;
  display: flex;
}
.body_box {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  /* 垂直居中 */
}
.root {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>